$(function(){
    var getValue = decodeURIComponent(location.search.split("=")[1]) ;//提取输入的关键字,,decodeURIComponent解码
    // console.log(getValue);
    var urlSong = `http://192.168.4.18:3000/playlist/detail?id=${getValue}`;

    $.ajax({
        method:"get",
        url:"http://192.168.4.18:3000/top/playlist/?cat=%E5%8D%8E%E8%AF%AD",
        success: function(res) {
            // console.log(res);
            handData(res);
        }
    })
    function handData(res){
        var getSong = res.playlists.filter(function(item){
            item.id ==Number(getValue)
            // console.log(item.id);
            if(item.id ==Number(getValue) ){
                // console.log(getValue);
                // console.log(item);
                return item
            }
        })
        var value = getSong[0];//获取点击id对应的歌曲
        // console.log('value: ', value);
        var {subscribedCount,shareCount,commentCount,tags,description} = value;
        // console.log(description);
        subscribedCount = num(subscribedCount);
        shareCount = num(shareCount);
        commentCount = num(commentCount);
        var html=`
        <img class="mainImg" src=${value.coverImgUrl} alt="">
                <div class="topMsg">
                    <p class="topMsgTitle">${value.name}</p>
                    <a href=""><p class="singMsg"><img class="singerImg" src=${value.creator.avatarUrl} alt=""><span class="singer">${value.creator.nickname}</span></p></a>
                    <p class="btn">
                        <a href=""> <span class="play">播放</span></a>
                        <a href=""> <span>收藏(${subscribedCount})</span></a>
                        <a href=""> <span>分享(${shareCount})</span></a>
                        <a href=""> <span>下载</span></a>
                        <a href=""> <span>评论(${commentCount})</span></a>
                    </p>
                    <div class="introduce">
                        <p >标签：<a href="">${tags[0]}</a></p>
                        <p>${description}</p>
                    </div>
                    
                </div>`
        $(".top").append(html)
    }
    function num (number){
        if(number>100000){
            number = Math.floor(number/10000)+"万";
        }
        return number;
    }


    $.ajax({
        method:"get",
        url:urlSong,
        success: function(res) {
            // console.log(res);
            handTwoData(res);
        }
    })
    function handTwoData(res){
        var item = res.playlist.tracks;
        // console.log(item);
        item.forEach(function(item,index){
            // console.log(item.id);
            var timesLong =  time(item.dt);
            var html =`<div class="music">
                        <span class="musicNum">${index}</span>
                        <a href="../html/critic.html?value=${item.id}" style="font-size: 0;"><img class="musicImg" src=${item.al.picUrl} alt=""></a>
                        <a href="../html/critic.html?value=${item.id}"><p class="musicName">${item.name}</p></a>
                        <a href=""><p class="musicTime">${timesLong}</p></a>
                        <a href=""><p class="musicSinger">${item.ar[0].name}</p></a>
                        <a href=""><p class="musicFrom">${item.al.name}</p></a>
                    </div>`
            $(".musicListBody").append(html)
            
        })
    }
    function time(dt){
        var min = minNumber(Math.floor(dt/1000/60));
        var seconds = minNumber(Math.floor(dt/1000%60));
        dt = String(min)+":"+String(seconds);
        return dt
    }
    // 补零
    function minNumber(num){
        if(num<10){
            num = "0"+num;
        }
        return num;
    }
})